<!--
 * @Description: 
 * @Author: liuzl
 * @Date: 2024-11-13 15:19:11
 * @LastEditors: liuzl
 * @LastEditTime: 2024-11-13 17:41:19
-->
<template>
    {{ fontSize }}
    <div :style="{'font-size':fontSize +'px'}">
        count:{{count}}
        <button @click="count++">count++</button>
        <button @click="childAddFont">fontSize++</button>
        <button @click="fontSize--">fontSize--</button>
        <!-- num:{{num}} -->
    </div>
</template>
<!-- js -->
<script setup>
import { ref } from 'vue';
const count = ref(0)
const fontSize = ref(20)
const props = defineProps(['num']);
count.value = props.num;

function childAddFont () {
    fontSize.value++;
}
function childReduceFont() {
  fontSize.value--;
}
// 暴露方法给父组件
defineExpose({ childAddFont,childReduceFont});
</script>
<!-- 样式 -->
<!-- scoped是为了当前组件的样式不会影响其他组件 -->
<style scoped>
</style>